var step = 1;
$(document).ready(function(){
    $(".mview-load-page").hide();
    editFromRender();
    phoneShow();

    if (workLink.kfid == "") {
        $("title").text("创建企微客服引流链接");
        $("#upload_qrcode_row").show();
        $("#addbutton").text("立即创建客服链接");
    } else {
        $("title").text("更新企微客服引流链接");
        $("#upload_qrcode_row").hide();
        $("#addbutton").text("更新客服链接");
    }

    $("#msg_type_ul li").click(function() {
        var msg_type = $(this).attr('data');
        workLink.msg_type = msg_type;
        editFromRender();
        phoneShow();
    });

    $("#menu_list_type li").click(function() {
        var menu_type = $(this).attr("data");
        $("#msgmenu_type").val(menu_type);
        if (menu_type == "view") {
            $("#menu_list_type li").removeClass("active");
            $("#menu_list_type li[data="+menu_type+"]").addClass("active");
        } else if (menu_type == "text") {
            $("#menu_list_type li").removeClass("active");
            $("#menu_list_type li[data="+menu_type+"]").addClass("active");
        } else {
            mviewToastr("error","天天外链主要用于引流,更多回复样式请使用摩尔微客!");
        }
    });

    $("#qrcode_style_ul li").click(function() {
        var qrcode_style = $(this).attr('data');
        workLink.qrcode_style = qrcode_style;
        editFromRender();
        phoneShow();
    });

    $("#qrcode_switch_type li").click(function() {
        var qrcode_switch_type = $(this).attr('data');
        workLink.qrcode_switch_type = qrcode_switch_type;
        editFromRender();
        phoneShow();
    });

    $("#qrcode_switch_lists li").click(function() {
        var qrcode_switch = $(this).attr('data');
        workLink.qrcode_switch = qrcode_switch;
        editFromRender();
        phoneShow();
    });

    $("#qrcode_upper_lists li").click(function() {
        var qrcode_upper = $(this).attr('data');
        workLink.qrcode_upper = qrcode_upper;
        editFromRender();
        phoneShow();
    });

    $("#device_bind_lists li").click(function() {
        var device_bind = $(this).attr('data');
        workLink.device_bind = device_bind;
        editFromRender();
        phoneShow();
    });
});

function phoneInputEdit(obj) {
    var id = obj.id;
    var value = $("#"+id).val();
    if (id == "kefu_nike") {
        workLink.kefu_nike = value;
    } else if (id == "head_content") {
        workLink.head_content = value;
    } else if (id == "tail_content") {
        workLink.tail_content = value;
    } else if (id == "remark") {
        workLink.remark = value;
    } else if (id == "corp_id") {
        if (workLink.kfid != "" && workLink.corp_id_old != "") {
            if (workLink.crop_id_old != value) {
                $("#corp_id").val(workLink.crop_id_old);
                mviewNotification("warning","更新企业提醒","更换企微后，会删除原企业的微信客服链接，并使用新企业创建微信客服链接；推广链接不会改变，请确定是否更换？","确定修改","取消",{"corp_id":value});
                return;
            } else {
                workLink.corp_id = value;
            }
        } else {
            workLink.corp_id = value;
        }
    } else if (id == "qrcode_title") {
        workLink.qrcode_title = value;
    } else if (id == "qrcode_nike") {
        workLink.qrcode_nike = value;
    } else if (id == "qrcode_describe") {
        workLink.qrcode_describe = value;
    } else if (id == "qrcode_notice") {
        workLink.qrcode_notice = value;
    } else if (id == "qrcode_daily") {
        workLink.qrcode_daily = value;
    } else if (id == "text_content") {
        workLink.text_content = value;
    }
    editFromRender();
    phoneShow();
}

function nextStep() {
    if (workLink.title <= 3) {
        mviewToastr("error","请输入3个字以上链接名称!");
        $("#title").focus();
        return;
    }
    if (workLink.msg_type == 1) {
        if (workLink.head_content == "") {
            mviewToastr("error","请输入起始文本内容!");
            $("#head_content").focus();
            return;
        }
        var msgMenu = false;
        $.each(workLink.msgmenu,function(key,msgmenu){
            if(msgmenu.type == "view"){
                msgMenu = true;
            }
        });
        if (!msgMenu) {
            addWelcomeMenu();
            mviewToastr("error","必须添加一个超链接文本菜单,否则无法实现引流!");
            return;
        }
    } else {
        if (workLink.text_content == "") {
            $("#text_content").focus();
            mviewToastr("error","请输入回复文本!");
            return;
        }
    }
    if (workLink.corp_id != "") {
        if (workLink.kefu_nike.length <= 2) {
            $("#kefu_nike").focus();
            mviewToastr("error","请输入2个字以上客服昵称!");
            return;
        }
        if (workLink.kefu_nike.kefu_head_img <= 2) {
            mviewToastr("error","请输入2个字以上客服昵称!");
            return;
        }
    }
    $("#from_setp_one").hide();
    $("#from_setp_two").show();
    $(".kefu-msg-cotainer").hide();
    $(".phone-default-cotain").show();
    step = 2;
    editFromRender();
}

function preStep() {
    step = 1;
    $("#from_setp_one").show();
    $("#from_setp_two").hide();
    $(".kefu-msg-cotainer").show();
    $(".phone-default-cotain").hide();
    $("#wxkfHeadSettingAfter").hide();
    $("#wxkfHeadSettingTitle font").text("隐藏客服昵称头像设置");
}

function confirmMviewNotification() {
    var mviewNotificationData = JSON.parse($("#mviewNotificationData").val());
    workLink.corp_id = mviewNotificationData.corp_id;
    colseMviewNotification();
    editFromRender();
    phoneShow();
}

function jsUploadCallBack(id,imageurl,imageName,updata,info) {
    if (id == "qrcode_list") {
        var qrcode_list = $("#qrcode_list").val();
        workLink.qrcodeLists = JSON.parse(qrcode_list);
        editFromRender();
        phoneShow();
    } else if (id == "qrcode_head_img") {
        workLink.qrcode_head_img = imageurl;
        editFromRender();
        phoneShow();
    } else if (id == "kefu_head_img") {
        workLink.kefu_head_img = imageurl;
        editFromRender();
        phoneShow();
    }
}

function editFromRender() {
    $("#remark").val(workLink.remark);
    $("#qrcode_title").val(workLink.qrcode_title);
    $("#kefu_nike").val(workLink.kefu_nike);
    $("#kefu_head_img").val(workLink.kefu_head_img);
    $("#kefu_head_img_show").attr("src",workLink.kefu_head_img);
    $("#head_content").val(workLink.head_content);
    $("#tail_content").val(workLink.tail_content);
    $("#text_content").val(workLink.text_content);
    if (workLink.corp_id != "" && workLink.corp_id !== null) {
        $("#corp_id").val(workLink.corp_id);
    }
    $("#msg_type_ul li").removeClass("active");
    $("#msg_type_ul li[data="+workLink.msg_type+"]").addClass("active");
    if (workLink.msg_type == 1) {
        $("#msg_type_menu").show();
        $("#msg_type_text").hide();
    } else {
        $("#msg_type_menu").hide();
        $("#msg_type_text").show();
    }
    var corp_id = $("#corp_id").val();
    workLink.corp_id = corp_id;
    if (workLink.corp_id == "") {
        $("#wxkfHeadSettingTitle").show();
        $("#wxkfHeadSettingTitle label").html('客服昵称头像设置:<font>如需自定义请<a href="/admin/wxkf/wxkf_crop" target="_blank">绑定企业微信</a>');
        $("#wxkfHeadSettingTitle div").hide();
        $("#wxkfHeadSetting").hide();
        if ($('#wxkfHeadSettingAfter').length <= 0) { 
            $("#wxkfHeadSetting").after('<div class="m-form-child-after" id="wxkfHeadSettingAfter" onclick="showCropAdd()">点击展开客服昵称头像设置<i class="bx bx-chevrons-down"></i></div>');
        }
    } else {
        $("#wxkfHeadSettingTitle").show();
        $("#wxkfHeadSettingTitle div").show();
        $("#wxkfHeadSettingTitle label").html('客服昵称头像设置:');
        $("#wxkfHeadSetting").show();
    }
    $("#msgmenu_list").html("");
    $.each(workLink.msgmenu,function(key,msgmenu){
        if(msgmenu.type == "view"){
            var content = msgmenu.view.content;
            if (content.length >= 10) {
                var contentText = content.slice(0,10)+"...";
            } else {
                var contentText = content;
            }
            $("#msgmenu_list").append('<li><div class="mleft"><i class="bx bx-link-alt"></i><font>'+contentText+'</font></div><div class="mright"><i onclick="updateMsgMenu('+key+');" class="bx bxs-edit-alt text-primary"></i><i onclick="deleteMsgMenu('+key+');" class="bx bxs-x-circle text-danger"></i></div></li>');
        } else {
            var content = msgmenu.text.content;
            if (content.length >= 10) {
                var contentText = content.slice(0,10)+"...";
            } else {
                var contentText = content;
            }
            $("#msgmenu_list").append('<li><div class="mleft"><i class="bx bxs-error bg-dark"></i><font>'+contentText+'</font></div><div class="mright"><i onclick="updateMsgMenu('+key+');" class="bx bxs-edit-alt text-primary"></i><i onclick="deleteMsgMenu('+key+');" class="bx bxs-x-circle text-danger"></i></div></li>');
        }
    });
    $("#qrcode_style_ul li").removeClass("active");
    $("#qrcode_style_ul li[data="+workLink.qrcode_style+"]").addClass("active");
    if (workLink.qrcode_style == 1) {
        $("#qrcode_setting").show();
        $("#qrcode_notice_row").show();
        $("#qrcodeSettingTitle").show();
        $("#qrcodeSetting").show();
    } else {
        $("#qrcode_setting").hide();
        $("#qrcode_notice_row").hide();
        if(workLink.kfid != ""){
            $("#qrcodeSettingTitle").hide();
            $("#qrcodeSetting").hide();
        }
    }
    if (workLink.qrcode_switch_type == 1) {
        closeSetting("qrcodeSwitch");
    } else {
        var qrcodeSwitch = $("#qrcodeSwitch").is(":visible");
        if(!qrcodeSwitch){
            closeSetting("qrcodeSwitch");
        }
    }
    $("#qrcode_head_img").val(workLink.qrcode_head_img);
    $("#qrcode_head_img_show").attr("src",workLink.qrcode_head_img);
    $("#qrcode_nike").val(workLink.qrcode_nike);
    $("#qrcode_describe").val(workLink.qrcode_describe);
    $("#qrcode_notice").val(workLink.qrcode_notice);
    $("#qrcode_switch_lists li").removeClass("active");
    $("#qrcode_switch_lists li[data="+workLink.qrcode_switch+"]").addClass("active");
    $("#qrcode_upper_lists li").removeClass("active");
    $("#qrcode_upper_lists li[data="+workLink.qrcode_upper+"]").addClass("active");
    if (workLink.qrcode_upper == 1) {
        $("#qrcode_daily_row").hide();
    } else {
        $("#qrcode_daily_row").show();
    }
    $("#qrcode_daily").val(workLink.qrcode_daily);
    $("#device_bind_lists li").removeClass("active");
    $("#device_bind_lists li[data="+workLink.device_bind+"]").addClass("active");
    if (workLink.qrcode_style == 1) {
        $(".phone-default").show();
        $(".phone-qrcode-full").hide();
    } else {
        $(".phone-default").hide();
        $(".phone-qrcode-full").show();
    }
}

function phoneShow() {
    $("#phone_kefu_nike").text(workLink.kefu_nike);
    if (workLink.qrcode_title == "") {
        $("#phone_title").text("请输入二维码页标题");
    } else {
        $("#phone_title").text(workLink.qrcode_title);
    }
    $("#phone_kefu_head_img").attr("src",workLink.kefu_head_img);
    $("#phone_crop_name").attr("src",workLink.crop_name);
    if (workLink.msg_type == 1) {
        $("#phone_head_content").html(workLink.head_content);
        $("#phone_tail_content").text(workLink.tail_content).show();
        $("#phone_text_menu").show();
    } else {
        var textContent = $("#text_content").val();
        $("#phone_head_content").html(textContent);
        $("#phone_tail_content").text(workLink.tail_content).hide();
        $("#phone_text_menu").hide();
    }
    $("#phone_text_menu").html("");
    $.each(workLink.msgmenu,function(key,msgmenu){
        if(msgmenu.type == "view"){
            $("#phone_text_menu").append('<span>'+msgmenu.view.content+'</span>');
        } else {
            $("#phone_text_menu").append('<p>'+msgmenu.text.content+'</p>');
        }
    });
    $("#phone-default-header-img").attr("src",workLink.qrcode_head_img);
    if (workLink.qrcode_nike == "") {
        $(".phone-default-header h3").text("请输入昵称");
    } else {
        $(".phone-default-header h3").text(workLink.qrcode_nike);
    }
    if (workLink.qrcode_describe == "") {
        $(".phone-default-header h5").text("请输入描述");
    } else {
        $(".phone-default-header h5").text(workLink.qrcode_describe);
    }
    $(".phone-default-footer").text(workLink.qrcode_notice);
    console.log(workLink);
    if (workLink.qrcodeLists.length >= 1) {
        $("#qrcode_img1").attr("src",workLink.qrcodeLists[0]);
        $("#qrcode_img2").attr("src",workLink.qrcodeLists[0]);
    }
}

function addWelcomeMenu() {
    $("#welcomeMenuModal h3").text("添加文本菜单");
    $("#welcomeMenuModal").modal("toggle");
    $("#msgmenu_key").val("");
    $("#msgmenu_list_view_content").val("");
}

function updateMsgMenu(key) {
    var msgMenu = workLink.msgmenu[key];
    $("#menu_list_type li").removeClass("active");
    $("#menu_list_type li[data="+msgMenu.type+"]").addClass("active");
    if (msgMenu.type == "view") {
        $("#msgmenu_list_view_content").val(msgMenu.view.content);
    } else {
        $("#msgmenu_list_view_content").val(msgMenu.text.content);
    }
    $("#msgmenu_key").val(key)
    $("#welcomeMenuModal h3").text("更新文本菜单");
    $("#welcomeMenuModal").modal("toggle");
}

function msgMenuSubmit() {
    var title = $("#welcomeMenuModal h3").text();
    var menu_type = $("#msgmenu_type").val();
    var msgmenu_key = $("#msgmenu_key").val();
    var content = $("#msgmenu_list_view_content").val();
    if (msgmenu_key == "") {
        if (menu_type == "view") {
            workLink.msgmenu.push({"type":"view","view":{"url":"","content":content}});
        } else {
            workLink.msgmenu.push({"type":"text","text":{"no_newline":0,"content":content}});
        }
    } else {
        if (menu_type == "view") {
            workLink.msgmenu[msgmenu_key] = {"type":"view","view":{"url":"","content":content}};
        } else {
            workLink.msgmenu[msgmenu_key] = {"type":"text","text":{"no_newline":0,"content":content}};
        }
    }
    editFromRender();
    phoneShow();
    $("#welcomeMenuModal").modal("toggle");
}

function deleteMsgMenu(key) {
    workLink.msgmenu.splice(key,1);
    editFromRender();
    phoneShow();
}

function uploadQrcodeNotice() {
    mviewToastr("warning","当前无需上传二维码,创建链接成功后上传即可!");
}

function showCropAdd() {
    mviewToastr("warning","您未绑定企业微信,请在上方授权绑定后再操作!");
}

function closeSetting(id) {
    var title = $("#"+id+"Title label").text();
    title = title.replace(":","");
    $("#"+id+"After").remove();
    if($("#"+id).is(":visible")){
        if (id == "qrcodeSwitch") {
            $("#qrcode_switch_type li").removeClass("active");
            workLink.qrcode_switch_type = 1;
            $("#qrcode_switch_type li[data="+workLink.qrcode_switch_type+"]").addClass("active");
            var title = '自定义二维码切换方式';
        }
        $("#"+id).hide();
        $("#"+id).after('<div class="m-form-child-after" id="'+id+'After" onclick="closeSetting(\''+id+'\')">点击展开'+title+'<i class="bx bx-chevrons-down"></i></div>');
        $("#"+id+"Title font").text("显示"+title);
        $("#"+id+"Title i").attr("class","bx bx-chevrons-down");
    } else {
        if (id == "qrcodeSwitch") {
            $("#qrcode_switch_type li").removeClass("active");
            workLink.qrcode_switch_type = 2;
            $("#qrcode_switch_type li[data="+workLink.qrcode_switch_type+"]").addClass("active");
        }
        $("#"+id).show();
        $("#"+id+"Title font").text("隐藏"+title);
        $("#"+id+"Title i").attr("class","bx bx-chevrons-up");
    }
}

function submitAdd() {
    if (workLink.qrcode_title == "") {
        mviewToastr("error","请输入二维码页标题!");
        $("#qrcode_title").focus();
        return;
    }
    if (workLink.qrcode_style == 1) {
        if (workLink.qrcode_nike == "") {
            mviewToastr("error","默认模版请设置微信昵称!");
            $("#qrcode_nike").focus();
            return;
        }
        if (workLink.qrcode_describe == "") {
            mviewToastr("error","默认模版请设置微信描述!");
            $("#qrcode_describe").focus();
            return;
        }
        if (workLink.qrcode_notice == "") {
            mviewToastr("error","默认模版请设置底部操作提示!");
            $("#qrcode_notice").focus();
            return;
        }
    }
    if (workLink.qrcode_upper == 2) {
        if (workLink.qrcode_daily == "") {
            mviewToastr("error","每日上限类型必须设置每日访问上限!");
            $("#qrcode_daily").focus();
            return;
        }
    }
    if (workLink.kfid == "") {
        mviewToastr("load","正在创建中,请稍等...",10);
    } else {
        mviewToastr("load","正在更新中,请稍等...",10);
    }
    $.ajax({
        "url": "/admin/wxkf/wxkf_list_update",
        "type": "POST",
        "data": workLink,
        "headers": {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(res){
            colsemviewToastr();
            if (res.status == "success") {
                mviewToastr("success",res.msg);
                if (workLink.kfid == "") {
                    setTimeout(function(){
                        window.location.href = "/admin/wxkf/wxkf_detial/"+res.data.kfid;
                    },2000);
                }
            } else {
                mviewToastr("error",res.msg,5);
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            colsemviewToastr();
            if (XMLHttpRequest.status == 419) {
                mviewToastr("error","因长时间未提交已掉线，请刷新网页重新提交!");
            } else {
                mviewToastr("error","网页错误,请稍后尝试!");
            }
        }
    });
}

function showDemoQrcode() {
    $("#service_qrcode").attr("src","https://res.wailian1.cn/uploads/2049/8050822.jpg");
    $("#service_text").text("微信客服引流视频案例");
    $("#service_time").text("请使用微信扫描查看案例");
    $("#service_describe").text("案例仅展示基础内容,您可以根据您的业务自定义外链内容。");
    $('#serviceModal').modal('toggle');
}

